<template>
    <el-input
        v-model.trim="value"
        prefix-icon="el-icon-search"
        clearable
        :placeholder="placeholder"
    ></el-input>
</template>
<script>
export default {
    name: 'SearchInput',
    props: {
        placeholder: {
            required: false,
            default: '',
        },
        modelValue: {},
    },
    computed: {
        value: {
            get() {
                return this.modelValue;
            },
            set(value) {
                this.$emit('update:modelValue', value);
            },
        },
    },
};
</script>

<style scoped>
.el-input {
    width: 280px;
    margin: 0 10px;
}
</style>
